
<template lang='pug'>
.upZIndex(
  style='position: absolute; visibility: visible; cursor: pointer; transform: translate(-50%, -50%) scale(2); left: 50%; top: 0px; width: 184px; height: 107.75px; opacity: 1;'
)
  #bigMarker(
    style='position: absolute;visibility: visible;left: 0px;top: 0px;width: 184px;height: 107.75px;transform-origin: 0px 0px;'
  )
    #innerActive(
      style='position: absolute; visibility: visible; overflow: hidden; background: rgba(0, 0, 0, 0.565); left: 0px; top: 0px; width: 184px; height: 69px; clip-path: inset(0px round 4px); transform-origin: 0px 0px;'
    )
      div(
        style='position: absolute; visibility: visible; left: 4px; top: 4px; width: 176px; height: 61px; transform-origin: 0px 0px;'
      )
        div(
          style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 176px; height: 61px; transform-origin: 0px 0px;'
        )
          div(
            style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 176px; height: 61px; transform-origin: 0px 0px;'
          )
            #top(
              style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 176px; height: 8px; transform-origin: 0px 0px;'
            )
              div(
                style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px; transform-origin: 0px 0px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
              div(
                style='position: absolute; visibility: visible; background: rgb(242, 225, 225); transform-origin: 80px 0px; transform: translate(0px, 0px) scale(1, 0.5); left: 8px; top: 0px; width: 160px; height: 1px;'
              )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 90deg); visibility: visible; left: 168px; top: 0px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
            #right(
              style='position: absolute; visibility: visible; left: 168px; top: 0px; width: 8px; height: 61px; transform-origin: 0px 0px;'
            )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 90deg); visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
              div(
                style='position: absolute; visibility: visible; background: rgb(242, 225, 225); transform-origin: 1px 0px; transform: translate(0px, 0px) scale(0.5, 1); left: 7px; top: 8px; width: 1px; height: 45px;'
              )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 180deg); visibility: visible; left: 0px; top: 53px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
            #bottom(
              style='position: absolute; visibility: visible; left: 0px; top: 53px; width: 176px; height: 8px; transform-origin: 0px 0px;'
            )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 270deg); visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
              div(
                style='position: absolute; visibility: visible; background: rgb(242, 225, 225); transform-origin: 0px 1px; transform: translate(0px, 0px) scale(1, 0.5); left: 8px; top: 7px; width: 160px; height: 1px;'
              )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 180deg); visibility: visible; left: 168px; top: 0px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
            #left(
              style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 61px; transform-origin: 0px 0px;'
            )
              div(
                style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px; transform-origin: 0px 0px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
              div(
                style='position: absolute; visibility: visible; background: rgb(242, 225, 225); transform-origin: 0px 22.5px; transform: translate(0px, 0px) scale(0.5, 1); left: 0px; top: 8px; width: 1px; height: 45px;'
              )
              div(
                style='position: absolute; transform-origin: 4px 4px; transform: translate(0px, 0px) rotate3d(0, 0, 1, 270deg); visibility: visible; left: 0px; top: 53px; width: 8px; height: 8px;'
              )
                img(
                  :src='require("@/assets/img/angle.png")',
                  style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 8px; height: 8px;'
                )
      div(
        style='position: absolute; visibility: visible; left: 12px; top: 12px; width: 160px; height: 47px; transform-origin: 0px 0px;'
      )
        div(
          style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 160px; height: 18px; transform-origin: 0px 0px;'
        )
          div(
            style='position: absolute; overflow: hidden; visibility: visible; left: 0px; top: 0px; width: 160px; height: 18px; clip-path: inset(0px); transform-origin: 0px 0px;'
          )
            div(
              style='position: absolute; display: -webkit-box; visibility: visible; white-space: normal; color: rgb(255, 255, 255); font-size: 14px; line-height: 18px; font-weight: normal; letter-spacing: 0px; word-break: break-all; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; width: 160px; top: 0px; justify-content: flex-start; -webkit-box-pack: start; text-align: left; left: 0px;'
            )
              | {{ title }}
        div(
          style='position: absolute; visibility: visible; background: rgb(169, 164, 165); left: 0px; top: 23px; width: 160px; height: 1px; transform-origin: 0px 0px;'
        )
        div(
          style='position: absolute; visibility: visible; left: 0px; top: 29px; width: 160px; height: 18px; transform-origin: 0px 0px;'
        )
          div(
            style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 160px; height: 18px; transform-origin: 0px 0px;'
          )
            div(
              style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 18px; height: 18px; transform-origin: 0px 0px;'
            )
              img(
                :src='icon',
                style='position:absolute;left:0;top:0;width:100%;height:100%;'
              )
            div(
              style='position: absolute; visibility: visible; left: 18px; top: 0px; width: 142px; height: 18px; transform-origin: 0px 0px;'
            )
              div(
                style='position: absolute; display: -webkit-box; visibility: visible; white-space: normal; color: rgb(255, 255, 255); font-size: 12px; line-height: 16px; font-weight: normal; letter-spacing: 0px; width: 142px; top: 0px; justify-content: flex-start; -webkit-box-pack: start; text-align: left; left: 0px;'
              )
                | {{ desc }}
      div(
        style='pointer-events: none; position: absolute; border-radius: 4px; visibility: visible; width: 184px; height: 69px;'
      )
    #iconArea(
      style='position: absolute; transform: translate(0px, -1px); visibility: visible; left: 87px; top: 69px; width: 10px; height: 38.75px; transform-origin: 0px 0px;'
    )
      img(
        :src='require("@/assets/img/line.png")',
        style='position: absolute; visibility: visible; left: 0px; top: 0px; width: 10px; height: 38.75px;'
      )
  #littleMarker(
    style='position: absolute; left: 0px; top: 0px; width: 28px; height: 28px; transform-origin: 0px 0px; visibility: hidden;'
  )
    img(
      :src='require("@/assets/img/scenic.png")',
      style='position: absolute; visibility: hidden; left: 0px; top: 0px; width: 28px; height: 28px;'
    )
</template>
<script>
export default {
  name: 'Mark',
  data () {
    return {
      title: '',
      desc: '',
      icon: '',
    }
  },
  methods: {
    open (title, desc, icon) {
      this.title = title
      this.desc = desc
      this.icon = icon
    },
    set (curHot) {
      this.curHot = curHot
    },
    clickMark() {
      console.log('mark.vue')
    }
  },
}
</script>
<style lang='stylus' scoped></style>
